<template>
  <el-radio-group v-model="selectedValue" @change="handleChange">
    <el-radio
      v-for="item in options"
      :key="item.conditionType"
      :label="item.conditionType"
      :disabled="item.disabled || false"
    >
      {{ item.conditionType }}
    </el-radio>
  </el-radio-group>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  // 数据源
  options: {
    type: Array,
    required: true,
    default: () => [],
    validator: (value) => {
      return value.every((item) => "conditionType" in item && "conditionType" in item);
    },
  },
  // 选中的值
  modelValue: {
    type: [String, Number, Boolean],
    default: "",
  },
  // 是否禁用所有选项
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

const selectedValue = ref(props.modelValue);


// 监听外部值变化
watch(
  () => props.modelValue,
  (newVal) => {
    selectedValue.value = newVal;
  }
);

// 处理选项变化
const handleChange = (val) => {
  emit("update:modelValue", val);
  emit("change", val);
};
</script>
